<template>
    <div class="paySuccess">
        <div class="navHead">
            <van-nav-bar
                    :border="false"
                    title=""
                    left-arrow
                    @click-left="$navBack('prePath')">
            </van-nav-bar>
        </div>
        <div class="payWrap bg-white-pk text-center-pk ">
            <div class="text-red-pk list-item-pad-pk font-size-18-pk">
                支付完成
            </div>
            <div class="d-flex-pk showTime ">
                <div class="showTime">
                    <span class="timeCount text-white-pk bg-D82D11">3</span>
                    <span>秒</span>
                </div>
                <div @click="toBackIndex">返回首页</div>
            </div>
            <div class="page-pad-pk scanOrder text-white-pk bg-D82D11" @click="handleOrderDetail">查看订单</div>
        </div>
        <div class="recommend page-pad-pk bg-white-pk list-item-pad-pk">
            <div class="like text-center-pk font-size-15-pk">猜你喜欢</div>
            <div class="goodsList pad-top-item d-flex-pk">
                <div v-for="(item,k) in goodsInfoList" :key="k"
                     @click="handleGoodsDetail(item)"
                     class="width-47">
                    <div>
                        <pk-img
                                :src="item.goodsThumb"
                                width="170px"
                                height="170px">
                        </pk-img>
                        <!-- <img :src="item.goodsThumb" alt="" class="goodsImg">-->
                    </div>
                    <div class="goodsInfo">
                        <div class="pad-top-item font-size-14-pk goodsName">{{item.goodsName}}</div>
                        <div class="d-flex-pk font-size-11-pk pad-top-item ">
                            <div class="price text-red-pk">￥{{item.originalPrice}}</div>
                            <div class="buyNum text-over">{{item.salesNum}}已购</div>
                            <div>
                                <img src="../../assets/images/car.png" class="carImg">
                            </div>
                        </div>
                    </div>
                    <div class="d-flex-pk shareItem font-size-11-pk text-red-pk">
                        <div class="share">分享赚</div>
                        <div>{{item.saleReward}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'PaySuccess',
        components: {},

        data() {
            return {
                goodsInfoList:[],
                normalPage:1
            }
        },

        created() {
            this.getGoodsInfoList(this.normalPage)
        },
        computed: {},
        watch: {},
        methods: {

            //返回首页
            toBackIndex(){


            },
            //查看订单
            handleOrderDetail(){

            },
            getGoodsInfoList(normalPage){
                this.$api.getGoodsInfoList({
                    beGroup: 1,
                    page: normalPage,
                    size: 10
                }).then(res => {
                    let result=this.$resArr(res);
                    if (result) {
                        this.goodsInfoList = this.goodsInfoList.concat(result.list);
                    }
                });
            },
            //商品详情
            handleGoodsDetail(item){
                this.$router.push({
                    name:"goodsDetail",
                    params:item.goodsId,
                })
            },


        }
    }
</script>

<style lang="scss" scoped>
    .paySuccess {
        font-size: 14px;
        .navHead{
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 999;
        }
        .payWrap{
            padding-top: 60px;
            .showTime{
                align-items: center;
                justify-content: center;
                margin: 0 10px;
            }
            .scanOrder, .timeCount{
                margin: 15px 5px;
                display: inline-block;
                border-radius: 2px;
            }
            .timeCount{
                padding:0 10px ;
            }
            .scanOrder{
                padding:5px 15px ;
            }
        }
        .recommend{
            line-height: 2;
            margin-top: 10px;
            .like{
                padding: 15px 0;
            }
            .like{
                padding: 15px 0;
            }
            .goodsList{
                .width-47{
                    width: 47%;
                }
                flex-wrap: wrap;
                justify-content: space-between;
                flex-direction: row;
                .goodsImg{
                    width: 170px;
                    height: 170px;
                    border-radius:4px 4px 0px 0px;
                }
                .goodsInfo{
                    padding: 5px;
                    align-items: center;
                    .price{
                        padding-right: 5px;
                    }
                    .buyNum{
                        flex-grow: 1;
                        color: #B3B3B3;
                    }
                    .carImg{
                        width: 18px;
                        height: 16px;
                    }
                    .goodsName{
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                    .text-over{
                        white-space: nowrap;
                        overflow: hidden;
                    }
                }
                .shareItem{
                    justify-content: space-between;
                    background:rgba(253,206,198,1);
                    border-radius:0px 0px 4px 4px;
                    padding: 5px;
                    margin: 10px 0;
                    .share{
                        flex-grow: 1;
                    }
                }


            }
        }

    }
</style>
